<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <input type="text" v-model="val1">
    <button @click="arr.push({id:arr.length+1,val:val1})">添加</button>
    <table border="1">
        <tr style="background-color: #8e7dd8;">
            <td>编号</td>
            <td>内容</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,index) in arr" :key="item.id" :class="{'odd-row': index % 2 === 0, 'even-row': index % 2 !== 0}" >
            <td>{{item.id}}</td>
            <td>{{item.val}}</td>
            <td><button @click="del(index)">删除</button></td>
        </tr>
    </table>
</div>
<div id="app1">
    <input type="text" v-model.number="num1">
    <select v-model="select">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
    </select>
    <input type="text" v-model.number="num2">
    <div>{{zong()}}</div>
</div>
<script>
    Vue.directive('color',function(ele,obj){
        if(obj.value %2 === 0){
            ele.style.backgroundColor = "green";
        }else if(obj.value % 2 !== 0){
            ele.style.backgroundColor = "pink";
        }
    })
    new Vue({
        el: '#app',
        data: {
            arr: [{
                id: 1,
                val: '21岁王俊峰深夜骑老奶奶炸街'
            }, {
                id: 2,
                val: '20岁王俊峰深夜骑老奶奶炸街'
            }, {
                id: 3,
                val: '19岁王俊峰深夜骑老奶奶炸街'
            }],
            val1: ''
        },
        methods: {
            del(index) {
                var arr = this.arr;
                arr.splice(index, 1);
                this.arr = arr;
            },
        }
    });

    new Vue({
        el:"#app1",
        data:{
            num1:'',
            num2:'',
            select:''
        },
        methods:{
            zong(){
                if(this.select == '+'){
                    return this.num1 + this.num2;
                }else if(this.select == '-'){
                    return this.num1 - this.num2;
                }else if(this.select == '*'){
                    return this.num1 * this.num2;
                }else if(this.select == '/'){
                    return this.num1 / this.num2;
                }else{
                    return '请选择运算符';
                }
            }
        }
    })
</script>
<style>
    .odd-row {
        background-color: #ff0000; /* 奇数行背景色 */
    }

    .even-row {
        background-color: #2f00ff; /* 偶数行背景色 */
    }
    tr:hover{
        background-color: azure;
    }
</style>
